import {
    defineConfig,
    presetAttributify,
    presetIcons,
    presetTypography,
    presetUno,
    presetWebFonts,
    transformerDirectives,
    transformerVariantGroup,
} from "unocss";

import { FileSystemIconLoader } from "@iconify/utils/lib/loader/node-loaders";
import fs from "fs";

// 本地SVG图标目录
const iconDir = "./src/assets/icons";

// 读取本地svg目录，自动生成sfaelist
const generateSafeList = () => {
    try {
        return fs.readdirSync( iconDir )
            .filter( ( file ) => file.endsWith( ".svg" ) )
            .map( ( file ) => `i-svg:${file.replace( ".svg", "" )}` );
    } catch ( error ) {
        console.error( "无法读取图标目录:", error );
        return [];
    }
};


export default defineConfig( {

    // 自定义快捷类
    // 定义常用的CSS组合类，避免重复编写
    shortcuts: {
        "wh-full": "w-full h-full",
        "flex-center": "flex justify-center items-center",
        "flex-x-center": "flex justify-center",
        "flex-y-center": "flex items-center",
        "flex-x-start": "flex items-center justify-start",
        "flex-x-between": "flex items-center justify-between",
        "flex-x-end": "flex items-center justify-end",
    },
    // 自定义主题变量，通常与项目的设计系统一致
    /**
     * UnoCSS 会根据 theme.colors 自动生成以下原子类：

颜色类：如 text-primary 、 bg-primary 、 border-primary 。
变量引用：生成的 CSS 会直接引用 var(--el-color-primary) ，而非硬编码颜色值。
     * 
     */
    theme: {
        colors: {
            primary: "var(--el-color-primary)",
            primary_dark: "var(--el-color-primary-light-5)",
        }
    },
    /**是unocss的核心扩展机制，用于定义原子类，图标，排版等功能的生成规则 */
    presets: [
        presetUno(),  // 提供基础的原子化css工具类，生成常用 的工具类，如布局类：flex,间距类:p-4
        presetAttributify(), // 允许将类名拆分成属性形式
        presetIcons( {
            // 额外属性
            extraProperties: {
                display: "inline-block",
                width: "1em",
                height: "1em",
            },
            // 图标集合
            collections: {
                // svg是图标集合名称，使用`i-svg:图标名`调用
                svg: FileSystemIconLoader( iconDir, ( svg ) => {
                    // 如果 `fill` 没有定义，则添加 `fill="currentColor"`
                    return svg.includes( 'fill="' ) ? svg : svg.replace( /^<svg /, '<svg fill="currentColor"' );
                } )
            }
        } ),
        /** 作用：提供排版相关的工具类，优化文章、博客等长文本内容的显示效果。
功能：
生成 prose 类，自动应用以下样式：
标题层级： h1 - h6 的间距和字体大小。
段落： p 的行高和边距。
列表： ul , ol 的缩进和符号。
代码块： pre , code 的背景和边框。
引用： blockquote 的边框和缩进*/
presetTypography(),
presetWebFonts({
    fonts:  {}
})
    ],
    safelist: generateSafeList(),
    transformers: [
        transformerDirectives(),  // 支持@apply指令，允许在样式块中复用原子类
        transformerVariantGroup()
    ]
} );